  <template>
    <div class="ordersDiv" id="ordersDivId">
      <h2>我的订单：</h2>
      <el-table
        :data="tableData"
        style="width: 100%">

        <el-table-column
          label="商品图">
          <template slot-scope="scope">
            <img :src="scope.row.imageUrlList" alt="加载中..." width="80" height="80">
          </template>
        </el-table-column>
        <el-table-column label="商品名" prop="goodName">
        </el-table-column>
        <el-table-column label="价格" prop="goodPrice">
        </el-table-column>
        <el-table-column label="商品状态" prop="goodState">
        </el-table-column>
        <el-table-column label="交易方式" prop="transactionMode">
        </el-table-column>
        <el-table-column label="交易地点" prop="goodAddress">
        </el-table-column>
        <el-table-column label="商品类型" prop="goodCategory">
        </el-table-column>
        <el-table-column label="商品描述" prop="goodDescription">
        </el-table-column>
        <el-table-column label="商品发布时间" prop="postTime">
        </el-table-column>
        <el-table-column
          align="right" width="200">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="queryinfo.query"
              size="mini"
              placeholder="输入商品名搜索"><el-button
                type="primary"
                @click="clickSearch"
                icon="el-icon-search"
                slot="append"
                v-loading.fullscreen.lock="fullscreenLoading"
              ></el-button></el-input>
          </template>

        </el-table-column>
      </el-table>
      <el-pagination
         style="margin-top:20px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.pageNum"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="queryinfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </div>
</template>

<script>
    export default {
      name: "person-orders",
      data() {
        return {
          tableData: [],
          queryinfo:{
            pageNum:1, //初始页
            pageSize:5, //每页的数据
            query: ''
          },
          dialogValue: '',
          
          total: 0
        }
      },
      mounted() {
        this.getData()
      },
      methods: {
        getData() {
          //加载数据
          let jsonObj = {};
          jsonObj.pageNum = this.queryinfo.pageNum;
          jsonObj.pageSize = this.queryinfo.pageSize;
          jsonObj.query = this.queryinfo.query;
          jsonObj.userId = window.sessionStorage.getItem("userId");
          let self = this;
          $.get("http://waiterxiaoyy.free.idcfengye.com/web/getMyTransactions",jsonObj,function (data) {
            self.tableData=data.data;
            self.total = data.count;
          },"json");
        },
        // 初始页currentPage、初始每页数据数pageSize和数据data
        handleSizeChange: function (size) {
          this.queryinfo.pageSize = size;
          this.getData();
        },
        handleCurrentChange: function(currentPage){
          this.queryinfo.pageNum = currentPage;
          this.getData();

        },
        clickSearch() {
          this.getData()
        }
      }
    }
</script>

<style scoped>
  .ordersDiv{
    width: 80%;
    margin: 0 auto;
    padding-top: 50px;
  }
</style>
